<template>
  <div class="qr-code-container">
    <div class="header">
      <h2>医保二维码生成器</h2>
      <p class="subtitle">输入医保卡号生成对应的二维码</p>
    </div>

    <div class="input-section">
      <div class="input-group">
        <label for="cardNumber" class="input-label">医保卡号</label>
        <input 
          id="cardNumber"
          type="text" 
          v-model="cardNumber" 
          placeholder="请输入医保卡号"
          class="card-input"
          @keyup.enter="getQRCodeHandle"
        />
      </div>
      
      <button 
        @click="getQRCodeHandle" 
        :disabled="loading || !cardNumber.trim()"
        class="generate-btn"
        :class="{ 'loading': loading }"
      >
        <span v-if="loading" class="btn-loading">
          <span class="spinner"></span>
          生成中...
        </span>
        <span v-else>生成二维码</span>
      </button>
    </div>

    <div class="qr-section" v-if="QrcodeText">
      <div class="qr-header">
        <h3>生成的二维码</h3>
        <span class="status" :class="getStatusClass">{{ statusText }}</span>
      </div>
      <div class="qr-wrapper">
        <Qrcode :qrUrlStr="QrcodeText" />
      </div>
      <p class="qr-tip">使用手机扫描二维码进行验证</p>
    </div>

    <div class="placeholder" v-else>
      <div class="placeholder-icon">📱</div>
      <p>请输入医保卡号生成二维码</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import Qrcode from "@/components/qrcode/Qrcode.vue";
import { getQRCodeData } from "@/api/api";

const cardNumber = ref("");
const QrcodeText = ref("");
const loading = ref(false);

const statusText = computed(() => {
  if (QrcodeText.value === "生成失败，请重试" || QrcodeText.value === "请求失败，请检查网络") {
    return "生成失败";
  } else if (QrcodeText.value && QrcodeText.value !== "www.baidu.com") {
    return "生成成功";
  }
  return "等待生成";
});

const getStatusClass = computed(() => {
  return {
    'success': statusText.value === "生成成功",
    'error': statusText.value === "生成失败",
    'waiting': statusText.value === "等待生成"
  };
});

const getQRCodeHandle = async () => {
  if (!cardNumber.value?.trim()) {
    return;
  }

  loading.value = true;
  
  try {
    let params = { insurance_card_number: cardNumber.value };
    
    const response = await getQRCodeData(params);
    console.log("API响应:", response);
    
    if (response && response.code === 200) {
      QrcodeText.value = response.data.qr_code_data || response.data || "默认二维码数据";
    } else {
      console.error("生成二维码失败:", response?.message || "未知错误");
      QrcodeText.value = "生成失败，请重试";
    }
  } catch (error) {
    console.error("请求异常:", error);
    QrcodeText.value = "请求失败，请检查网络";
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.qr-code-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 32px;
}

.header h2 {
  color: #1a365d;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.subtitle {
  color: #718096;
  margin: 0;
  font-size: 14px;
}

.input-section {
  margin-bottom: 32px;
}

.input-group {
  margin-bottom: 20px;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  color: #2d3748;
  font-weight: 500;
  font-size: 14px;
}

.card-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.card-input:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.card-input::placeholder {
  color: #a0aec0;
}

.generate-btn {
  width: 100%;
  padding: 14px 24px;
  background: #4299e1;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.generate-btn:hover:not(:disabled) {
  background: #3182ce;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

.generate-btn:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.qr-section {
  text-align: center;
  padding: 24px;
  background: #f7fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.qr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.qr-header h3 {
  margin: 0;
  color: #2d3748;
  font-size: 18px;
}

.status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status.success {
  background: #c6f6d5;
  color: #276749;
}

.status.error {
  background: #fed7d7;
  color: #c53030;
}

.status.waiting {
  background: #feebc8;
  color: #d69e2e;
}

.qr-wrapper {
  display: inline-block;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-tip {
  margin: 16px 0 0 0;
  color: #718096;
  font-size: 14px;
}

.placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #a0aec0;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.placeholder p {
  margin: 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .qr-code-container {
    margin: 16px;
    padding: 20px;
  }
  
  .qr-header {
    flex-direction: column;
    gap: 12px;
  }
}
</style>